{% load static %}
 <!DOCTYPE html>

<html class="theme-dark">
	
	<head>
		<title>u4xg</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="{% static 'u4xg_game/w3.css' %}">
		<link rel="stylesheet" href="{% static 'u4xg_game/u4xg.css' %}">
		<script src="{% static 'u4xg_game/u4xg.js' %}"></script>
		<style>
		</style>
	</head>
	
	<body class="z1">
		<header class="w3-container z2 w3-top w3-hide-large w3-padding w3-xlarge">
			<a href="#" class="w3-button w3-margin-right" onclick="hideShowable(); innerpage_mobilemenu.style.display='block'">☰</a><span><b>u4xg</b></span>
		</header>
		<div class="w3-sidebar w3-collapse w3-top w3-large w3-padding sidebar z2">
			<div class="w3-container ">
				<h3 class="w3-padding-64"><b>u4xg</b></h3>
			</div>
			<div class="w3-bar-block">
						<div onclick="hideShowable(); innerpage_manual.style.display='block'" class="w3-button w3-bar-item" >manual</div>
						<div onclick="hideShowable(); innerpage_publicgames.style.display='block'" class="w3-button w3-bar-item" >public games</div>
						<div onclick="hideShowable(); innerpage_currentgames.style.display='block'" class="w3-button w3-bar-item" >current games</div>
						<div onclick="hideShowable(); innerpage_account.style.display='block'" class="w3-button w3-bar-item" >account</div>
						<a href="logout" class="w3-button w3-bar-item" >logout</a>
						
						<div class="w3-button w3-bar-item" ><br></div>
						<div onclick="toggleTheme();" class="w3-button w3-bar-item" >switch theme</div>
			</div>
		</div>
		
		<div class="w3-main innerpage_container">
			<noscript><h1>sorry, can't play without javascript</h1></noscript>
			<!--
			<div class='emoji'>
			&#x2709;&#xfe0e;
			&#xf582;&#xfe0e;
			&#x1f4ac;&#xfe0e;
			&#x1fcf8;&#xfe0e;
			&#x1f47d;&#xfe0e;
			&#x1f6f8;&#xfe0e;
			&#x1f680;&#xfe0e;
			</div>
			-->
			<div id="space-for-top-menu" class='w3-container w3-padding w3-xlarge w3-hide-large'><div class="w3-button"><br></div></div>
			
			<div id='innerpage_mobilemenu' class="w3-container innerpage_menu showable w3-padding w3-xlarge w3-hide-large" style='display:none'>
				<br>
				<div class="w3-bar-block">
					<b>
					<div onclick="hideShowable(); innerpage_manual.style.display='block'" class="w3-button w3-bar-item z2 mobile_button" >manual</div>
					<div onclick="hideShowable(); innerpage_publicgames.style.display='block'" class="w3-button w3-bar-item z2 mobile_button" >public games</div>
					<div onclick="hideShowable(); innerpage_currentgames.style.display='block'" class="w3-button w3-bar-item z2 mobile_button" >current games</div>
					<div onclick="hideShowable(); innerpage_account.style.display='block'" class="mobile_button w3-button w3-bar-item z2 " >account</div>
					<a href="logout" class="w3-button w3-bar-item z2 mobile_button" >logout</a>
					</b>
				</div>
			</div>
			
			<div id="innerpage_manual" class="w3-container innerpage_content showable" style="display:{{ manual_display }}">
			</div>
				
			<div id="innerpage_publicgames" class="w3-container innerpage_content showable" style="display:{{ publicgames_display }}">
				<h2 class="w3-xxxlarge"><b>Public Games</b></h2>
				<hr class="z1" style="width:100%;border:3px solid">
				these are public games that you can join
			</div>
			
			<div id="innerpage_currentgames" class="w3-container innerpage_content showable" style="display:{{ currentgames_display }}">
				<h2 class="w3-xxxlarge"><b>Current Games</b></h2>
				<hr class="z1" style="width:100%;border:3px solid ">
				these are the games that you are currently playing
			</div>
			
			<div id="innerpage_account" class="w3-container innerpage_content showable" style="display:{{ account_display }}">
				<h2 class="w3-xxxlarge"><b>Account</b></h2>
				<hr class="z1" style="width:100%;border:3px solid ">
				<div class='w3-container'> last login: {{ last_login }} (UTC)  </div>
				<br>
				<div class='w3-container'> use these forms to change your email, username or password </div>
				<form method="post" action="{% url 'account_change_email' %}">
					{% csrf_token %}
					{% for field in email_change_form %}
						<br>
						<div class='w3-padding z2'>
							<div class='w3-row'>
								<div class='w3-quarter' style='padding:8px'>{{ field.label_tag }}</div>
								<div class='w3-threequarter' style='padding:8px'>{{ field }}</div>
							</div>
							{% if field.errors %}
							<div class='w3-row w3-panel w3-red'>
								{{ field.errors }}
							</div>
							{% endif %}
							<div class='w3-row'>
							 {{ field.help_text }}
							</div>
						</div>
					{% endfor %}
					<button type="submit" class='w3-button u4xg_button ' style='display:block;margin-right:0;margin-left:auto;'>submit email</button>
					<br>
				</form>
				<form method="post" action="{% url 'account_change_username' %}">
					{% csrf_token %}
					{% for field in username_change_form %}
						<br>
						<div class='w3-padding z2'>
							<div class='w3-row'>
								<div class='w3-quarter' style='padding:8px'>{{ field.label_tag }}</div>
								<div class='w3-threequarter' style='padding:8px'>{{ field }}</div>
							</div>
							{% if field.errors %}
							<div class='w3-row w3-panel w3-red'>
								{{ field.errors }}
							</div>
							{% endif %}
							<div class='w3-row'>
							 {{ field.help_text }}
							</div>
						</div>
					{% endfor %}
					<button type="submit" class='w3-button u4xg_button' style='display:block;margin-rig/t:0;margin-left:auto'>submit username</button>
					<br>
				</form>
				<form method="post" action="{% url 'account_change_password' %}">
					{% csrf_token %}
					{% for field in password_update_form %}
						<br>
						<div class='w3-padding z2'>
							<div class='w3-row'>
								<div class='w3-quarter' style='padding:8px'>{{ field.label_tag }}</div>
								<div class='w3-threequarter' style='padding:8px'>{{ field }}</div>
							</div>
							{% if field.errors %}
							<div class='w3-row w3-panel w3-red'>
								{{ field.errors }}
							</div>
							{% endif %}
							<div class='w3-row'>
							 {{ field.help_text }}
							</div>
						</div>
					{% endfor %}
					<button type="submit" class='w3-button u4xg_button' style='display:block;margin-right:0;margin-left:auto;'>submit password</button>
					<br>
				</form>
			</div>
			
		</div>
	</body>
	
</html> 
